<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/index.css">
	<title>素拓分统计页面</title>
</head>
<body>
    <div id="webPage">
    	<div class="top">
    		<button class="ok" @click="ok">ok</button>
    		<input v-model="name">
    	</div>
    	<div class="personCard">
    		<div class="cardLeft">
    			<img :src="img">
    			<div class="imgButt">{{student.name}}</div>
    		</div>
    		<div class="cardRight">
    			<div class="sort4">
    				<div class="sort4Name">文体艺术与身心发展</div>
    				<div class="num">{{num1}}</div>
    			</div>
    			<div class="sort4">
    				<div class="sort4Name">思想政治与道德素养</div>
    				<div class="num">{{num2}}</div>
    			</div>
    			<div class="sort4">
    				<div class="sort4Name">科学技术与创新创业</div>
    				<div class="num">{{num3}}</div>
    			</div>
    			<div class="sort4">
    				<div class="sort4Name">社会实践与志愿服务</div>
    				<div class="num">{{num4}}</div>
    			</div>
    		</div>
    	</div>
    	<div class="sort3">
    		<button class="choice" :class="{'choose': sort3Flag==1}" @click="sort3Click(1)">时间排列</button>
    		<button class="choice" :class="{'choose': sort3Flag==2}" @click="sort3Click(2)">已通过</button>
    		<button class="choice" :class="{'choose': sort3Flag==3}" @click="sort3Click(3)">待审核</button>
    	</div>
    	<div class="itemsPart">
    		<div class="itemPart" v-for="item in items">
    			<div class="title" :class="[{'blue': item.color=='blue'},{'red': item.color=='red'}]">{{item.title}}</div>
    			<div class="sortFour">{{item.sort4}}</div>
    			<div class="tAndP">
    				<div class="time">{{item.time}}</div>
	    			<div class="pass" :class="{'passT': item.pass}">{{item.pass | passForm}}</div>
    			</div>
    		</div>
    	</div>
    </div>
    <script src="js/vue.min.js"></script>
    <script src="js/index.js"></script>
</body>
</html>